<%--
  Created by IntelliJ IDEA.
  User: Guio
  Date: 2023/10/20
  Time: 17:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>朋友圈</title>
    <style>
        body, html {
            display: flex;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        #top {
            width: 100%;
            height: 350px;
            border-bottom: 1px solid #585858;
        }

        #index {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: flex-start;
            width: 65%;
            height: 100%;
        }

        #bImg {
            width: 100%;
            height: 300px;
        }

        #bImg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        #friends {
            width: 100%;
        }

        #friend {
            border-top: 1px solid #585858;
        }

        #friend div {
            margin-left: 50px;
        }

        #friend p {
            display: flex;
            align-items: center;
            margin-top: 5px;
        }

        #good {
            background-color: #d3d1d1;
        }

        #comment {
            background-color: #d3d1d1;
        }

        #userImg {
            width: 45px;
            height: 45px;
        }
        #delete{
            float: right;
            color: red;
        }
    </style>
</head>
<body>
<div id="index">

    <%--头部--%>
    <div id="top">
        <%--背景图--%>
        <div id="bImg">
            <img src="https://img0.baidu.com/it/u=1435639120,2241364006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
                 alt="" >
        </div>
        <%--登录用户，头像--%>
        <div>
            <p>${onlineUser.name}</p>
            <img src="/file/show?name=${onlineUser.img}" alt="">
        </div>
        <div>
            <button class="add"><a href="/friends/view/add">发朋友圈</a></button>
        </div>
    </div>

    <%--动态--%>
    <div id="friends">
        <c:forEach items="${friendsList}" var="friends">
            <div id="friend">
                <div id="delete">
                    <a class="delete" id="${friends.id}">删除</a>
                </div>
                    <%--用户头像和名称--%>
                <p><img id="userImg" src="/file/show?name=${friends.img}" alt="">${friends.name}</p>
                    <%--图文--%>
                <div>
                    <p>${friends.text}</p>
                    <c:forEach items="${friends.imgs}" var="img">
                        <img src="/file/show?name=${img}" alt="" width="200">
                    </c:forEach>
                </div>
                <p>${friends.time}</p>
                    <%--点赞--%>
                <div id="good">
                    <i><a href="/friends/good?friendsID=${friends.id}">❤</a></i>
                    <c:forEach items="${goodList}" var="good">
                        <c:if test="${good.friendsId == friends.id}">
                            ${good.userName}
                        </c:if>
                    </c:forEach>
                </div>
                    <%--评论区--%>
                <div id="comment">
                    <c:forEach items="${commentList}" var="comment">
                        <c:if test="${comment.friendsId == friends.id}">
                            <p>
                                    ${comment.userName}
                                <c:if test="${comment.addUserName != null}">
                                    回复${comment.addUserName}
                                </c:if>
                                :${comment.commentText}
                            </p>
                        </c:if>
                    </c:forEach>
                </div>
            </div>
        </c:forEach>
    </div>

</div>
<script src="/static/js/jquery/jquery-3.7.1.min.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script>
    //删除
    $(".delete").click(function () {
        let id = $(this).attr("id");
        layer.confirm("确定要删除这条数据吗？", {icon: 3, title: '提示'}, function (index) {
            $.post('/friends/delete', {id: id}, function (e) {
                if (e.result) {
                    layer.msg(e.message, {icon: 1, time: 1000}, function () {
                        location.reload();
                    })
                } else {
                    layer.msg(e.message, {icon: 2, time: 1000})
                }
            })
        })
    })
</script>
</body>
</html>
